<template>
	<view>
		<view class="container b-f" v-if="is_dealer && isData">
			<!-- 头部背景图 -->
			<view class="dealer-bg" >
				<image style="z-index: 10;" mode="widthFix" :src="background"></image>
			</view>

			<!-- widget -->
			<view class="widget-body b-f dis-flex flex-dir-column flex-y-center">
				<!-- 用户信息 -->
				<view class="widget widget__base m-top20 b-f dis-flex flex-dir-column"  style="z-index: 99;">
					<view class="base__user f-30">
						<!-- 用户头像 -->
						<view class="user-avatar">
							<image :src="user.avatarUrl"></image>
						</view>
						<view class="user-nickName f-32">{{ user.nickName }}</view>
						<view class="user-referee f-24 col-9">{{ words.index.words.referee.value }}：{{ dealer.referee ? dealer.referee.nickName : '平台' }}</view>
					</view>
					<view class="base__capital dis-flex flex-dir-column">
						<!-- 佣金卡片 -->
						<view class="capital-card dis-flex">
							<view class="card-left flex-box dis-flex flex-dir-column flex-x-around">
								<view class="f-28 col-f">
									<text space="ensp">{{ words.index.words.money.value }} {{ dealer.money }} 元</text>
								</view>
								<view class="f-28 col-f">
									<text space="ensp">{{ words.index.words.freeze_money.value }} {{ dealer.freeze_money }} 元</text>
								</view>
							</view>
							<view class="card-right flex-box dis-flex flex-x-end flex-y-center">
								<view class="withdraw-btn f-26" @tap="navigationToWithdraw">{{ words.index.words.withdraw.value }}</view>
							</view>
						</view>
						<!-- 已提现金额 -->
						<view class="capital-already clear">
							<view class="already-left f-28 fl">{{ words.index.words.total_money.value }}</view>
							<view class="already-right f-28 fr">{{ dealer.total_money }}元</view>
						</view>
					</view>
				</view>

				<!-- 操作列表 -->
				<view class="widget widget__operat clear b-f">
					<view class="operat__item">
						<navigator hover-class="none" url="../withdraw/list/list">
							<view class="item__icon">
								<text class="iconfont icon-zhangben" style="color:#F9BA21;"></text>
							</view>
							<view class="item__text f-28">{{ words.withdraw_list.title.value }}</view>
						</navigator>
					</view>
					<view class="operat__item">
						<navigator hover-class="none" url="../order/order">
							<view class="item__icon">
								<text class="iconfont icon-dingdan" style="color:#FF7575;"></text>
							</view>
							<view class="item__text f-28">{{ words.order.title.value }}</view>
						</navigator>
					</view>
					<view class="operat__item">
						<navigator hover-class="none" url="../team/team">
							<view class="item__icon">
								<text class="iconfont icon-tuandui" style="color:#59C78E;"></text>
							</view>
							<view class="item__text f-28">{{ words.team.title.value }}</view>
						</navigator>
					</view>
					<view class="operat__item">
						<navigator hover-class="none" url="../qrcode/qrcode">
							<view class="item__icon">
								<text class="iconfont icon-erweima" style="color:#5fa5ff;"></text>
							</view>
							<view class="item__text f-28">{{ words.qrcode.title.value }}</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>

		<!-- 当前不是分销商 -->
		<view class="container b-f" v-if="!is_dealer && isData">
			<view class="no-dealer">
				<view class="no-icon dis-flex flex-x-center">
					<image src="../../../static/img/not-dealer.png"></image>
				</view>
				<view class="no-msg dis-flex flex-x-center f-30" style="">{{ words.index.words.not_dealer.value }}</view>
				<!-- 立即申请 -->
				<view class="no-submit form-submit dis-flex flex-x-center">
					<form @submit="triggerApply" report-submit="true">
						<button form-type="submit">{{ words.index.words.apply_now.value }}</button>
					</form>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isData: false,
				words: {},
				user: {},
				dealer: {},
				is_dealer:null,
				background:'',
				
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 获取分销商中心数据
			this.getDealerCenter();
		},

		methods: {
			/**
			 * 获取分销商中心数据
			 */
			getDealerCenter: function() {
				let _this = this;
				_this._get('user.dealer/center', {}, function(result) {
					let data = result.data;
					data.isData = true;
					// 设置当前页面标题
					uni.setNavigationBarTitle({
						title: data.words.index.title.value
					});
					_this.setData(data);
					// console.log(data);
				});
			},

			/**
			 * 跳转到提现页面
			 */
			navigationToWithdraw: function() {
				uni.navigateTo({
					url: '../withdraw/apply/apply',
				})
			},

			/**
			 * 立即加入分销商
			 */
			triggerApply: function(e) {
				
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				uni.navigateTo({
					url: '../apply/apply',
				})
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.dealer-bg image {
		width: 100%;
	}

	.widget-body .widget {
		width: 700upx;
		box-sizing: border-box;
		box-shadow: 0 6upx 20upx rgba(0, 0, 0, 0.11);
		border-radius: 12upx;
	}

	.widget__base {
		margin-top: -60upx;
	}

	.widget__base .base__user {
		position: relative;
		padding: 15upx 40upx;
		border-bottom: 1upx solid #e7e7e7;
	}

	.widget__base .base__user .user-avatar {
		position: absolute;
		top: -75upx;
		right: 60upx;
	}

	.widget__base .base__user .user-avatar image {
		width: 150upx;
		height: 150upx;
		z-index: 10;
		border: 4upx solid #fff;
		border-radius: 50%;
	}

	.widget__base .base__user .user-nickName {
		margin-top: 30upx;
		margin-bottom: 10upx;
	}

	.widget__base .base__capital {
		padding: 35upx;
	}

	.widget__base .base__capital .capital-card {
		height: 200upx;
		padding: 30upx 0;
		background-color: #8e84fc;
		border-radius: 10upx;
		box-sizing: border-box;
		text-align: center;
	}

	.widget__base .base__capital .capital-card .card-right .withdraw-btn {
		width: 130upx;
		height: 50upx;
		line-height: 50upx;
		background: #fff;
		color: #8e84fc;
		border-radius: 25upx;
		margin-right: 32upx;
	}

	.widget__base .base__capital .capital-already {
		padding: 20upx;
		padding-bottom: 0;
	}

	/* 操作列表 */

	.widget__operat {
		padding: 50upx;
		margin-top: 40upx;
	}

	.widget__operat .operat__item {
		width: 33.33333%;
		float: left;
		margin-bottom: 50upx;
		text-align: center;
	}

	.widget__operat .operat__item:last-child {
		margin-bottom: 0;
	}

	.widget__operat .operat__item .item__icon {
		margin-bottom: 8upx;
	}

	.widget__operat .operat__item .item__icon text {
		font-size: 60upx;
	}

	/* 当前不是分销商 */

	.no-dealer {
		padding-top: 150upx;
	}

	.no-icon image {
		width: 420upx;
		height: 240upx;
	}

	.no-msg {
		padding: 86upx 0;
	}

	.form-submit button {
		font-size: 30upx;
		background: #786cff;
		border: 1upx solid #786cff;
		color: white;
		border-radius: 50upx;
		padding: 0 80upx;
		min-width: 470upx;
		box-sizing: border-box;
	}

	.form-submit button[disabled] {
		background: #8e84fc;
		border-color: #8e84fc;
		color: white;
	}
</style>
